|
The final code will look like,
<head runat="server">
<title></title>
<script
src="_scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript"
src="ckeditor/ckeditor.js"></script>
<script type="text/javascript"
src="ckeditor/adapters/jquery.js"></script>
<script type="text/javascript"
language="javascript">
$(document).ready(function()
{
$('#TextBox1').ckeditor();
});
</script>
</head>
<body>
<form id="form1"
runat="server">
<div>
<asp:TextBox ID="TextBox1"
TextMode="MultiLine" runat="server"></asp:TextBox>
</div>
<asp:Button ID="btnSave"
runat="server" Text="Save" onclick="btnSave_Click" />
</form>
With this knowledge, we will move
forward and do some basic customization on the CKEditor using jQuery.
Customizing CKEditor
By default, the CKeditor includes large
number of editor options to do our rich text formatting. See the image above.
Most of the time, we will not require all the above options to do our styling.
We can customize the CKEditor to include only required options like we do in
previous versions.
The ckeditor() function will accept 2
optional parameters. The first parameter is a callback function that gets
executed when the editor is ready and second parameter is the configuration
options. This configuration option will accept either inline set of styles or
toolbarset name to render with the editor.
<script type="text/javascript"
language="javascript">
$(document).ready(function()
{
var options = {
toolbar:
[
['Bold',
'Italic', '-', 'NumberedList', 'BulletedList', '-',
'Link',
'Unlink'],
['UIColor']
]
};
$('#TextBox1').ckeditor(function() { /* callback code */ }, options);
});
</script>
OR
<script type="text/javascript"
language="javascript">
$(document).ready(function()
{
$('#TextBox1').ckeditor(function() { var editor =
$('#TextBox1').ckeditorGet();
//Your code goes here
}, {toolbar:'Basic'});
});
</script>
Execute the page and you can see the
customized CKEditor in action.
Refer here
to know about all available editor options.
Fetching the Text from
CKEditor
Since, it is an ASP.Net textbox control
it can be accessed by regular Text property in the server. By default, ASP.Net
will not allow HTML inputs to be posted to server in order to prevent the cross
site scripting attach. You will get the following error,
A potentially dangerous Request.Form value
was detected from the client (TextBox1="").
You need to set ValidateRequest="false"
in the Page directive to prevent this error.
You can fetch the text from client side
through val() method exposed by jQuery adapter.Refer below,
<script type="text/javascript"
language="javascript">
$(document).ready(function()
{
$('#TextBox1').ckeditor(function()
{
var editor =
$('#TextBox1').ckeditorGet();
//Your code goes here
}, { toolbar:
'Basic'});
$('#TextBox1').val("<b>I
love CKEditor!!</b>");
alert("jquery way" +
$('#TextBox1').val());
});
</script>
Upload Images with CKeditor
To upload image and emebed it from CKeditor, please refer,
Upload Images and Integrate with CKeditor in Asp.Net
Working with Events
Apart from general events exposed by
CKEditor, there are four events raised by the jQuery adapter.
instanceReady.ckeditor
fired when the editor is created, but
before any callback being passed to the ckeditor() method.
setData.ckeditor
fired when data is set into the editor.
getData.ckeditor
fired when data is fetched from the
editor. The current editor data is also passed in the arguments.
destroy.ckeditor
fired when the editor gets destroyed.
It can be used, for example, to execute some cleanup on the page.
Syntax
$('#TextBox1').ckeditor(function() {/*
callback code */
}, { toolbar
settings/configs,
on: {
event:
eventmethodname
}
});
Example
<script type="text/javascript"
language="javascript">
$(document).ready(function()
{
$('#TextBox1').ckeditor(function()
{
var editor =
$('#TextBox1').ckeditorGet();
//Your code goes here
}, { toolbar: 'Basic',
on: {
instanceReady:
instanceReadyEvent
}
});
function
instanceReadyEvent(ev) {
this.document.on("keyup",
function() {
var editor =
$('#TextBox1').ckeditorGet();
var tex =
editor.getData();
});
}
});
</script>
In the above code, we have registered a
keyup event using jQuery instanceReady event. Refer here
to know more abovt editor
instance.
|